<template>
  <div class="admin-user-container">
    <el-table :data="users" style="width: 100%; height: 760px; overflow: auto;">
      <el-table-column prop="username" label="用户名" width="200" align="center">
      </el-table-column>
      <el-table-column prop="student_id" label="学号" width="200" align="center">
      </el-table-column>
      <el-table-column prop="emergency_contact" label="紧急联系人" width="200" align="center">
      </el-table-column>
      <el-table-column prop="created_at" label="注册时间" width="200" align="center">
        <template v-slot="scope">{{ formatDate(scope.row.created_at) }}</template>
      </el-table-column>
      <el-table-column prop="last_login" label="最后登录时间" width="200" align="center">
        <template v-slot="scope">{{ formatDate(scope.row.last_login) }}</template>
      </el-table-column>
      <el-table-column label="操作" width="200" align="center">
        <template v-slot="scope">
          <el-button type="primary" @click="editUser(scope.row)">编辑</el-button>
          <el-button type="danger" @click="deleteUser(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑用户对话框 -->
    <el-dialog title="编辑用户信息" :visible.sync="dialogVisible" :modal="false">
      <el-form :model="currentUser" ref="form">
        <el-form-item label="用户名" required>
          <el-input v-model="currentUser.username"></el-input>
        </el-form-item>
        <el-form-item label="学号" required>
          <el-input v-model="currentUser.student_id" disabled></el-input>
        </el-form-item>
        <el-form-item label="紧急联系人" required>
          <el-input v-model="currentUser.emergency_contact"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveUser">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';
import { MessageBox } from 'element-ui';
import baseUrl from '../assets/path.js';
export default {
  data() {
    return {
      baseUrl,
      users: [], // 存放用户数据
      dialogVisible: false, // 控制对话框的显示与隐藏
      currentUser: {} // 当前正在编辑的用户
    };
  },
  methods: {
    async fetchUsers() {
      try {
        const response = await axios.get(`${this.baseUrl}/admin/users`);
        this.users = response.data;
      } catch (error) {
        console.error('获取用户数据失败:', error);
        this.$message.error('获取用户数据失败');
      }
    },
    formatDate(dateTime) {
      if (!dateTime) return '';
      const date = new Date(dateTime);
      return date.toISOString().slice(0, 19).replace('T', ' '); // 转换为 yyyy-mm-dd hh:mm:ss 格式
    },
    editUser(user) {
      this.currentUser = { ...user }; // 深拷贝当前用户数据
      this.dialogVisible = true; // 显示对话框
    },
    async saveUser() {
      try {
        await axios.put(`${this.baseUrl}/admin/users/${this.currentUser.id}`, this.currentUser);
        this.$message.success('用户信息更新成功');
        this.dialogVisible = false;
        this.fetchUsers();
      } catch (error) {
        console.error('更新用户信息失败:', error);
        this.$message.error('更新用户信息失败');
      }
    },
    async deleteUser(userId) {
      try {
        await MessageBox.confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        });
        await axios.delete(`${this.baseUrl}/admin/users/${userId}`);
        this.$message.success('用户删除成功');
        this.fetchUsers();
      } catch (error) {
        console.error('删除用户失败:', error);
        this.$message.error('删除用户失败');
      }
    }
  },
  mounted() {
    this.fetchUsers(); // 组件挂载后获取用户数据
  }
};
</script>

<style scoped>
.admin-user-container {
  padding: 20px;
  background-color: #ffffff; /* 改为白色背景 */
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  margin: 20px; /* 添加外边距 */
}

/* 表格样式 */
.el-table {
  border: none;
  width: 100%; /* 使表格宽度自适应 */
  border-radius: 8px; /* 圆角 */
  overflow: hidden; /* 避免溢出 */
}

/* 表头样式 */
.el-table th {
  background-color: #f0f2f5; /* 表头背景色 */
  color: #333; /* 字体颜色 */
  font-weight: bold; /* 粗体 */
}

/* 表格单元格样式 */
.el-table td {
  text-align: center; /* 单元格文本居中 */
  padding: 12px; /* 内边距 */
  color: #555; /* 字体颜色 */
}

/* 按钮样式 */
.el-button {
  margin: 0 5px; /* 按钮间距 */
}

/* 鼠标悬停效果 */
.el-table tr:hover {
  background-color: #f5f5f5; /* 鼠标悬浮行背景色 */
}

/* 给每列添加间隔 */
.el-table-column {
  padding: 5px 10px; /* 单元格内边距 */
}

/* 格式化日期的文本样式 */
.date-cell {
  color: #888; /* 日期文本颜色 */
}

/* 响应式设计，调整小屏幕下的显示 */
@media (max-width: 768px) {
  .el-table {
    font-size: 14px; /* 小屏幕字体调整 */
  }
  .el-table-column {
    padding: 2px 5px; /* 小屏幕下的单元格内边距 */
  }
}
</style>
